<template>
  <div class="test-reset-store">
    <h2>测试 resetSetupStore 插件</h2>

    <div class="test-section">
      <h3>当前 Settings Store 状态:</h3>
      <div class="state-display">
        <p>
          <strong>Title:</strong>
          {{ settingStore.title }}
        </p>
        <p>
          <strong>Fixed Header:</strong>
          {{ settingStore.fixedHeader }}
        </p>
        <p>
          <strong>Hidden SideBar:</strong>
          {{ settingStore.hiddenSideBar }}
        </p>
      </div>
    </div>

    <div class="test-section">
      <h3>修改状态:</h3>
      <div class="controls">
        <el-input
          v-model="newTitle"
          placeholder="输入新标题"
          style="width: 200px; margin-right: 10px"
        />
        <el-button @click="changeTitle">修改标题</el-button>
      </div>

      <div class="controls">
        <el-switch v-model="newFixedHeader" @change="changeFixedHeader" />
        <span style="margin-left: 10px">Fixed Header</span>
      </div>

      <div class="controls">
        <el-switch v-model="newHiddenSideBar" @change="changeHiddenSideBar" />
        <span style="margin-left: 10px">Hidden SideBar</span>
      </div>
    </div>

    <div class="test-section">
      <h3>测试重置功能:</h3>
      <el-button type="primary" @click="resetStore">重置 Store 状态 (调用 $reset)</el-button>
    </div>

    <!-- 子组件 -->
    <TestCpns />

    <div class="test-section">
      <h3>测试结果:</h3>
      <div class="result-display">
        <p v-for="(result, index) in testResults" :key="index" :class="result.type">
          {{ result.message }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/store/modules/settings'
import TestCpns from './test-cpns.vue'

const settingStore = useSettingStore()

// 用于修改状态的变量
const newTitle = ref('')
const newFixedHeader = ref(settingStore.fixedHeader)
const newHiddenSideBar = ref(settingStore.hiddenSideBar)

// 测试结果
const testResults = ref<Array<{ message: string; type: string }>>([])

// 记录初始状态
const initialState = {
  title: settingStore.title,
  fixedHeader: settingStore.fixedHeader,
  hiddenSideBar: settingStore.hiddenSideBar,
}

// 方法
function changeTitle() {
  if (newTitle.value.trim()) {
    settingStore.changeSetting({ key: 'title', value: newTitle.value })
    addTestResult(`标题已修改为: ${newTitle.value}`, 'info')
    newTitle.value = ''
  }
}

function changeFixedHeader() {
  settingStore.changeSetting({ key: 'fixedHeader', value: newFixedHeader.value })
  addTestResult(`Fixed Header 已设置为: ${newFixedHeader.value}`, 'info')
}

function changeHiddenSideBar() {
  settingStore.changeSetting({ key: 'hiddenSideBar', value: newHiddenSideBar.value })
  addTestResult(`Hidden SideBar 已设置为: ${newHiddenSideBar.value}`, 'info')
}

function resetStore() {
  console.log('重置前的状态:', {
    title: settingStore.title,
    fixedHeader: settingStore.fixedHeader,
    hiddenSideBar: settingStore.hiddenSideBar,
  })

  // 调用重置方法
  if (typeof settingStore.$reset === 'function') {
    settingStore.$reset()

    console.log('重置后的状态:', {
      title: settingStore.title,
      fixedHeader: settingStore.fixedHeader,
      hiddenSideBar: settingStore.hiddenSideBar,
    })

    // 验证重置是否成功
    const isReset =
      settingStore.title === initialState.title &&
      settingStore.fixedHeader === initialState.fixedHeader &&
      settingStore.hiddenSideBar === initialState.hiddenSideBar

    if (isReset) {
      addTestResult('✅ Store 状态已成功重置到初始值!', 'success')
    } else {
      addTestResult('❌ Store 状态重置失败!', 'error')
    }

    // 同步控件状态
    newFixedHeader.value = settingStore.fixedHeader
    newHiddenSideBar.value = settingStore.hiddenSideBar
  } else {
    addTestResult('❌ $reset 方法不存在，resetSetupStore 插件可能未正确工作!', 'error')
  }
}

function addTestResult(message: string, type: string) {
  testResults.value.push({ message, type })
}

// 初始化测试结果
addTestResult(
  `初始状态记录 - Title: ${initialState.title}, FixedHeader: ${initialState.fixedHeader}, HiddenSideBar: ${initialState.hiddenSideBar}`,
  'info',
)
addTestResult('请修改一些状态值，然后点击重置按钮测试插件功能', 'info')
</script>

<style scoped>
.test-reset-store {
  max-width: 800px;
  padding: 20px;
  margin: 0 auto;
}

.test-section {
  padding: 15px;
  margin-bottom: 30px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.state-display {
  padding: 15px;
  margin-top: 10px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.controls {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.result-display {
  max-height: 300px;
  padding: 15px;
  overflow-y: auto;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.success {
  font-weight: bold;
  color: #67c23a;
}

.error {
  font-weight: bold;
  color: #f56c6c;
}

.info {
  color: #909399;
}
</style>
